<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="/js/jquery.js"></script>
    <script type="text/javascript" src="/js/echarts.min.js"></script>

</head>
<body>
<!--border:2px  solid  red-->
<div id="Gradient_bar_chart" style=";height:700px;width:1200px;" ></div>


</body>

<script type="text/javascript">


$(document).ready(function() {

    var chartDom = document.getElementById('Gradient_bar_chart');
    var myChart = echarts.init(chartDom);
    var option;

    var names=[];    //横坐标数组（实际用来盛放X轴坐标值）
    var counts=[];    //纵坐标数组（实际用来盛放Y坐标值）

    $.ajax({

        type: "post",
        async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
        url: "/findDnameStuCount",    //请求发送到dataActiont处
        data: {},
        dataType: "json",        //返回数据形式为json

        success: function (result) {

            // prettier-ignore
            // let dataAxis = ['点', '击', '柱', '子', '或', '者', '两', '指', '在', '触', '屏', '上', '滑', '动', '能', '够', '自', '动', '缩', '放'];

            // let data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220];
            console.log(result);
            console.log("------>"+result.length);
            // console.log("------>"+data.val("dname"));

            for(var i in result){
                console.log(i)                      // alert(i)//显示的是 1、2、3等数值
                console.log(result[i])                //alert(data[i]);//显示为[object,object],不是我们想要的
                // console.log(data[i].dname)          //alert(data[i].name)//显示name属性的值

                for(var j in result[i]){
                    console.log(j)                  //alert(j);//显示属性的名称
                    // console.log(data[i][j])         //alert(data[i][j])//显示属性的值
                }
                names.push(result[i].dname);
                counts.push(result[i].count1);

            }
            console.log(names);
            console.log(counts);

            let dataAxis=names;
            let data=counts;

            let yMax = 500;


            let dataShadow = [];
            for (let i = 0; i < data.length; i++) {
                dataShadow.push(yMax);
            }
            option = {
                title: {
                    text: '学生人数统计：渐变色柱形图 点击缩放',
                    subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'
                },
                xAxis: {
                    data: dataAxis,
                    axisLabel: {
                        inside: true,
                        color: '#fff'
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    z: 10
                },
                yAxis: {
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        color: '#999'
                    }
                },
                dataZoom: [
                    {
                        type: 'inside'
                    }
                ],
                series: [
                    {
                        type: 'bar',
                        showBackground: true,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0, color: '#83bff6'},
                                {offset: 0.5, color: '#188df0'},
                                {offset: 1, color: '#188df0'}
                            ])
                        },
                        emphasis: {
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {offset: 0, color: '#2378f7'},
                                    {offset: 0.7, color: '#2378f7'},
                                    {offset: 1, color: '#83bff6'}
                                ])
                            }
                        },
                        data: data
                    }
                ]
            };
            // Enable data zoom when user click bar.
            const zoomSize = 6;
            myChart.on('click', function (params) {
                console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
                myChart.dispatchAction({
                    type: 'dataZoom',
                    startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
                    endValue:
                        dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
                });
            });

            option && myChart.setOption(option);

        },
        error:function (data) {
            // alert("");
            console.log("错误")
        }
    })
});

</script>


</html>